<template>
  <div class="app-container">
  <div class="filter-container">
        <el-button type="primary" @click="analyzeClick()">销售分析</el-button>
        <el-input clearable v-model="search.number" placeholder="销售单号" style="width: 170px;margin-left:10px;"></el-input>
        <el-input clearable v-model="search.customer" placeholder="订单合同号" style="width: 170px;margin-left:10px;"></el-input>
        <el-input clearable v-model="search.phone" placeholder="联系电话" style="width: 170px;margin:0 5px;"></el-input>
        <el-date-picker v-model="search.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>

        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="100" align="center" label="订单合同号">
        <template slot-scope="scope">
          <span>{{ scope.row.contractnumber }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="销售单号">
        <template slot-scope="scope">
          <span>{{ scope.row.salesnumber }}</span>
        </template>
      </el-table-column>
      
      <el-table-column  min-width="100" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.salesdate }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="客户姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.customername }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="联系电话">
        <template slot-scope="scope">
          <span>{{ scope.row.customerphone }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="具体车型">
        <template slot-scope="scope">
          <span>{{ scope.row.salescar }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="VIN码">
        <template slot-scope="scope">
          <span>{{ scope.row.vincode }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="合同金额">
        <template slot-scope="scope">
          <span>{{ scope.row.salesprice}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="付款类型">
        <template slot-scope="scope">
          <span>{{ scope.row.paytype | parsePayType }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="已收全款">
        <template slot-scope="scope">
          <span>{{ scope.row.fullpaystate |parseHandingType }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="加装办理">
        <template slot-scope="scope">
          <span>{{ scope.row.extraaddstate |parseHandingType }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="保险办理">
        <template slot-scope="scope">
          <span>{{ scope.row.insurancestate | parseHandingType }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="代办办理">
        <template slot-scope="scope">
          <span>{{ scope.row.agencystate | parseHandingType }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="赎证">
        <template slot-scope="scope">
          <span>{{ scope.row.redemptioncert?'是':'否' }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.salestate | parseSalesState }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  width="380" fixed="right">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="processClick(scope.row.id)">进度</el-button>
          <el-button type="primary" size="small" @click="historyClick(scope.row.id)">操作历史</el-button>
          <router-link :to="'/presalemanage/sales/saleslipdetails/'+scope.row.id">
            <el-button type="primary" size="small" style="margin-left:5px;">
              详情
            </el-button>
          </router-link>
          
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="fetchData" />

<!-- 进度 -->
<el-dialog :title="dialogProcess.title" :visible.sync="dialogProcess.visible"  width="700px">
    <div class="ci">
        <div class="item">
        <span class="name required">进度</span>
        <span class="value">
            <el-select v-model="dialogProcess.data.salesState" clearable placeholder="--" style="width: 220px;">
                <el-option 
                v-for="(item,index) in selectOptions.salesState"
                :key="index"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            
        </span>
        </div>
        
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogProcess.visible = false">取 消</el-button>
        <el-button type="primary" @click="saveProcessClick()" :loading="dialogProcess.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end 进度 -->

<!-- 操作历史 -->
<el-dialog :title="dialogHistory.title" :visible.sync="dialogHistory.visible"  width="700px">
    <div class="ci">
        <el-table v-loading="dialogHistory.listLoading" :data="dialogHistory.list" 
          border fit highlight-current-row stripe 
          style="width: 100%">
          <el-table-column align="center" label="序" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row._id }}</span>
            </template>
          </el-table-column>
        <el-table-column  min-width="100" align="center" label="操作员">
            <template slot-scope="scope">
              <span>{{ scope.row.operator }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="缘由">
            <template slot-scope="scope">
              <span>{{ scope.row.reason }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createtime |parseTime }}</span>
            </template>
          </el-table-column>
        </el-table>
        
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="dialogHistory.visible = false">关 闭</el-button>
        
    </div>
</el-dialog>
<!-- end 操作历史 -->

  </div>
</template>

<script>
import * as salesApi from '@/api/presale/sales'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as enumHelper from '@/utils/enum'

export default {
    components: { Pagination },
    data(){
        return{
          search:{ 
              number:'',
              customer:'',
              phone:'',
              daterange:'',
              nothavedorder:true
          },
          listQuery: {
                page: 1,
                rows: 20,
                name:'',
                phone:'',
                state:-1,
                daterange:''
          },
          list:null,
          listLoading:false,
          total:0,
          selectOptions:{
            salesState:[]
          },

          dialogProcess:{
              visible:false,
              saveloading:false,
              title:'销售单进度',
              data:{
                  id:'',
                  salesState:''
              }
          },

          dialogHistory:{
              visible:false,
              saveloading:false,
              title:'操作历史',
              list:null,
              total:0,
              listLoading:false,
              data:{
                  id:'',
                  salesState:''
              }
          },
        }
    },
    created(){
        var that=this;
        //初始化下拉菜单
        enumHelper.initOptions(that.selectOptions.salesState,enumHelper.presale.salesState);
        that.fetchData();
    },
    filters:{
      parseHandingType(val){
        return ['无','已办理','未办理'][val];
      },
      parsePayType(val){
        return enumHelper.presale.payType.getName(val);
      },
      parseSalesState(val){
        return enumHelper.presale.salesState.getName(val);
      }

    },
    methods:{
        fetchData(){
          var that=this;
            salesApi.getSaleslipList({}).then(res=>{
              if(res.data){
                that.list=[...res.data.items.map((item,index)=>{
                  item._id=index+1;
                  return item;
                })];
              }
            })
        },
        analyzeClick(){
          this.$router.push({
            path:'/presalemanage/sales/saleslipanalyze'
          })
        },
        processClick(id){
          this.dialogProcess.data.salesState='';
          this.dialogProcess.visible=true;
        },
        saveProcessClick(){
          var that=this;
          that.dialogProcess.saveloading=true;
        },
        historyClick(id){
          var that=this;
          that.dialogHistory.list=[];
          that.dialogHistory.visible=true;

          salesApi.getOperationList({}).then(res=>{
            if(res.data){
              that.dialogHistory.list=[...res.data.items.map((item,index)=>{
                item._id=index+1;
                return item;
              })]
            }
          })
        }
    }
}
</script>

<style>

</style>